<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/static/css/icon.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weui2.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
    <script src="/static/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/picker.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/highcharts.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/all.js?v=2" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/no-data-display.js?v=2" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div class="paid">
    <div class="left">
        <a href="/paid.html?shop_id={{ shop_id }}">
            <div id="paid"></div>
        </a>
    </div>
    <div class="right">
        <a href="/business.html?shop_id={{ shop_id }}">
            <label>营销日报</label>

            <p>¥ 89651</p>
        </a>
        <a href="/recharge.html?shop_id={{ shop_id }}">
            <label>会员充值</label>

            <p>¥ {{ recharge_total }}</p>
        </a>
        <a href="/abnormal.html?shop_id={{ shop_id }}">
            <label>异常操作</label>

            <p>¥ {{ abnormal_total }}</p>
        </a>
    </div>
</div>
<script type="text/javascript">
    //饼图
    $(function () {

        var product_payment_data = JSON.parse('{{ product_payment_data|safe }}');

        var payment_percent_data = [];
        var payment_total = parseFloat("{{ payment_total }}");
        if (!payment_total) {
            title = "实 收：无数据"
        }
        else {
            title = '实 收：' + payment_total
        }
        for (var i = 0; i++, i <= product_payment_data.length - 1;) {
            payment_percent_data.push([product_payment_data[i]['支付方式'], parseFloat(product_payment_data[i]['今日支付金额'] / payment_total)])

        }

        if (product_payment_data.length==0){
            payment_percent_data=[['暂无数据',0.01]]
        }
        $('#paid').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            legend: {
                layout: 'vertical',
                align: 'right', //水平方向位置
                verticalAlign: 'top', //垂直方向位置
                x: 0, //距离x轴的距离
                y: 20, //距离Y轴的距离
                itemMarginBottom: 10,
                symbolRadius: false
            },
            title: {
                text: title
            },
            lang: {
                noData: "暂无数据" //真正显示的文本
            },
            noData: {

                position: {    //相对于绘图区定位无数据标签的位置。 默认值：[object Object].
                    //align: 'right',
                    //verticalAlign: 'bottom'
                },
                // Custom svg attributes
                attr: {     //无数据标签中额外的SVG属性
                    //'stroke-width': 1,
                    //stroke: '#cccccc'
                },
                // Custom css
                style: {    //对无数据标签的CSS样式。 默认值：[object Object].
                    //fontWeight: 'bold',
                    //fontSize: '15px',
                    //color: '#202030'
                }
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                size: '160%',
                name: '占比',
                center: ['50%', '50%'],
                data: payment_percent_data
            }],
            credits: {
                enabled: false     //不显示LOGO
            }
        });


    });
</script>
</body>
</html>
